<template>
    <div class="heading-book">
<!--    图书搜索    -->
        <el-row class="heading-book-search-and-new" >
            <el-col :span="16">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="IBSN" value="book_ibsn_id"></el-option>
                        <el-option label="书名" value="book_title"></el-option>
                        <el-option label="作者" value="book_author"></el-option>
                        <el-option label="出版社" value="book_publisher"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="searchBook"></el-button>
                </el-input>
            </el-col>
<!--    新增图书功能  -->
            <el-col :span="4" :offset="2">
                <el-button type="primary" icon="el-icon-edit" @click="newBookFormVisible = true">新建</el-button>
                <el-dialog title="新增图书" :visible.sync="newBookFormVisible" style="width: 60%;margin-left: 20%">
                    <el-form
                            :model="bookForm"
                            status-icon
                            :rules="rules"
                            ref="bookForm"
                            label-width="120px"
                            class="heading-book-form"
                    >
                        <el-form-item label="图书IBSN编号" prop="ibsn">
                            <el-input v-model="bookForm.ibsn" autocomplete="off" maxlength="13" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="图书库存地址" prop="address">
                            <el-input v-model="bookForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="图书入库数量" prop="number">
                            <el-input v-model.number="bookForm.number" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="book-footer">
                        <el-button @click="newBookFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitBookForm">确 定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
<!--    图书信息列表  -->
        <el-table
                :data="booksData"
                style="width: 100%;margin-top: 10px">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="图书封面">
                            <span>
                            <img :src="props.row.book_img" class="book-img">
                            </span>
                        </el-form-item>
                        <el-form-item label="图书名称">
                            <span>{{ props.row.book_title }}</span>
                        </el-form-item>
                        <el-form-item label="图书作者">
                            <span>{{ props.row.book_author }}</span>
                        </el-form-item>
                        <el-form-item label="图书出版社">
                            <span>{{ props.row.book_publisher }}</span>
                        </el-form-item>
                        <el-form-item label="图书出版时间">
                            <span>{{ props.row.book_pubdate }}</span>
                        </el-form-item>
                        <el-form-item label="图书页数">
                            <span>{{ props.row.book_page }}</span>
                        </el-form-item>
                        <el-form-item label="图书单价">
                            <span>{{ props.row.book_price }}</span>
                        </el-form-item>
                        <el-form-item label="图书库存数量">
                            <span>{{ props.row.book_now_number }}</span>
                        </el-form-item>
                        <el-form-item label="图书总数">
                            <span>{{ props.row.book_number }}</span>
                        </el-form-item>
                        <el-form-item label="图书库存地址">
                            <span>{{ props.row.book_address }}</span>
                        </el-form-item>
                        <el-form-item label="图书简介" style="width: 100%">
                            <span>{{ props.row.book_gist }}</span>
                        </el-form-item>
                        <el-form-item label="图书入库时间">
                            <span>{{ props.row.book_create_time }}</span>
                        </el-form-item>
                        <el-form-item label="图书信息最后更新时间">
                            <span>{{ props.row.book_update_time }}</span>
                        </el-form-item>
                        <el-form-item label="图书下架标识">
                            <span>{{ props.row.book_is_deleted?"已下架":"未下架" }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="图书IBSN"
                    prop="book_ibsn_id">
            </el-table-column>
            <el-table-column
                    label="图书名称"
                    prop="book_title">
            </el-table-column>
            <el-table-column
                    label="图书作者"
                    prop="book_author">
            </el-table-column>
            <el-table-column
                    label="图书出版社"
                    prop="book_publisher">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="props">
                    <el-button size="mini" @click="bookEdit(props.$index, props.row)">修改</el-button>
                    <el-dialog title="修改图书信息" :visible.sync="changeBookFormVisible" style="width: 60%;margin-left: 20%">
                        <el-form :model="changeBookForm">
                            <el-form-item label="图书信息的类别">
                                <el-select v-model="changeBookForm.type" placeholder="请选择修改的图书信息类别">
                                    <el-option label="图书IBSN" value="book_ibsn_id"></el-option>
                                    <el-option label="图书标题" value="book_title"></el-option>
                                    <el-option label="图书作者" value="book_author"></el-option>
                                    <el-option label="图书简介" value="book_gist"></el-option>
                                    <el-option label="图书图片地址" value="book_img"></el-option>
                                    <el-option label="图书页数" value="book_page"></el-option>
                                    <el-option label="图书价格" value="book_price"></el-option>
                                    <el-option label="图书出版社" value="book_publisher"></el-option>
                                    <el-option label="图书出版时间" value="book_pubdate"></el-option>
                                    <el-option label="图书库存地址" value="book_address"></el-option>
                                    <el-option label="图书在库数量" value="book_now_number"></el-option>
                                    <el-option label="图书总数量" value="book_number"></el-option>
                                    <el-option label="图书入库时间" value="book_create_time"></el-option>
                                    <el-option label="图书信息最后修改时间" value="book_update_time"></el-option>
                                    <el-option label="图书是否允许被检索" value="book_is_deleted"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改的信息">
                                <el-input
                                        v-model="changeBookForm.input"
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请输入修改后的内容"
                                        autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="book-footer">
                            <el-button @click="changeBookFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="submitChangeBookForm">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="bookDelete(props.$index, props.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--    图书列表切换  -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="defaultPage"
                :page-sizes="pages"
                :page-size="pages[pagesIndex]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "HeadingBooks",
        data(){
            // 新增图书的数据校验
            let validIBSN = (rule,value,callback) => {
                if(value === ''){
                    callback(new Error('请输入图书的IBSN编号'))
                }else{
                    if(value.length !== 13){
                        callback(new Error('请检查图书编号是否错误'))
                    }else{
                        callback()
                    }
                }
            }
            let validAddress = (rule,value,callback) => {
                if(value === ''){
                    callback(new Error('请输入地址'))
                }else{
                    callback()
                }
            }
            return {
                // 查询图书
                input:'',
                select:'',
                // 新增图书,及输入数据的校验
                newBookFormVisible:false,
                bookForm:{
                    ibsn:'',
                    address:'',
                    number: ''
                },
                rules:{
                    ibsn:[
                        {
                            validator:validIBSN,trigger:'blur'
                        }
                    ],
                    address:[
                        {
                            validator:validAddress,trigger:'blur'
                        }
                    ],
                    number:[
                        { required: true, message: '入库数量不能为空'},
                        { type: 'number', message: '入库数量必须为数字值'}
                    ]
                },
                // 修改图书
                changeBookFormVisible:false,
                changeBookForm:{
                    ibsn:'',
                    type:'',
                    input:''
                },
                // 图书列表
                booksData: [],
                // 图书列表分页显示
                defaultPage: 1,
                totalNumber:5,
                pages:[5,10,15,20],
                pagesIndex: 1,
            };
        },
        mounted() {
            this.getBooksList()
        },
        methods:{
            // 页面加载时获取数据库中图书列表
            getBooksList(){
                console.log('发送书籍获取请求！')
                this.$axios.get('/books/list',{
                    params:{
                        role:this.$store.state.user.user_role
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.booksData = res.data.msg
                        this.totalNumber = res.data.msg.length
                        // console.log(this.booksData);
                    }else{
                        this.$message({
                            message: '抱歉,服务器开小差了,请刷新重试~~~',
                            type: 'warning'
                        })
                    }
                })
            },
            // 搜索图书
            searchBook(){
                this.$axios.get('/books/search',{
                    params: {
                        type:this.select,
                        input:this.input
                    }
                }).then(res=>{
                    if(res.data.code === 200){
                        this.$message({
                            message: '查询图书信息成功！',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '请确认图书信息完整性后重试！',
                            type: 'warning'
                        })
                    }
                    this.booksData = res.data.msg
                    // console.log(this.booksData)
                })
            },
            // 填写完成，点击确定，发送图书请求
            submitBookForm(){
                this.newBookFormVisible = false
                console.log('发送新增图书请求~~~')
                this.$axios.post('/books/new',{
                    ibsn:this.bookForm.ibsn,
                    address:this.bookForm.address,
                    number:this.bookForm.number,
                    role:this.$store.state.user.user_role
                }).then(res=>{
                    this.bookForm.ibsn = ''
                    this.bookForm.address = ''
                    this.bookForm.number = ''
                    if(res.data.code === 200){
                        this.getBooksList()
                        this.$message({
                            message: '新建图书信息成功！',
                            type: 'success'
                        })
                    }else{
                        if(res.data.code === 401){
                            this.$message({
                                message: '请登录后重试！',
                                type: 'warning'
                            })
                        }else{
                            this.$message.error('请按照规范填写！');
                        }
                    }
                })
            },
            // 修改图书
            bookEdit(index, row) {
                console.log(index, row);
                this.changeBookForm.ibsn = row.book_ibsn_id
                this.changeBookFormVisible = true
            },
            submitChangeBookForm(){
                // console.log(this.changeBookForm.ibsn,this.changeBookForm.input)
                // 发送post请求,修改图书
                console.log('发送修改图书信息请求');
                this.$axios.post('/books/update',{
                    role:this.$store.state.user.user_role,
                    ibsn:this.changeBookForm.ibsn,
                    type:this.changeBookForm.type,
                    input:this.changeBookForm.input
                }).then(res => {
                    this.changeBookForm.ibsn = ''
                    this.changeBookForm.type = ''
                    this.changeBookForm.input = ''
                    switch (res.data.code){
                        case 200 :{
                            this.$message({
                                message: '修改图书信息成功！',
                                type: 'success'
                            })
                            // 重新获取图书列表
                            this.getBooksList()
                            break
                        }
                        case 401:{
                            this.$message({
                                message: '权限不足!请登录...',
                                type: 'warning'
                            })
                            break;
                        }
                        case 422:{
                            this.$message({
                                message: '存在外键引用,请删除相关借阅记录后再进行图书修改...',
                                type: 'warning'
                            })
                            break;
                        }
                        default:{
                            this.$message({
                                message: '抱歉服务器开小差了,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
                this.changeBookFormVisible = false
            },
            // 删除图书
            bookDelete(index, row) {
                // console.log(index, row);
                // 发送post请求
                console.log('发送删除图书信息请求')
                this.$axios.post('/books/delete',{
                    role:this.$store.state.user.user_role,
                    ibsn:row.book_ibsn_id
                }).then(res => {
                    switch (res.data.code) {
                        case 200:{
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            })
                            // 重新获取图书列表
                            this.getBooksList()
                            break;
                        }
                        case 403: {
                            this.$message({
                                message: '权限不足!请登录...',
                                type: 'warning'
                            })
                            break;
                        }
                        case 422:{
                            this.$message({
                                message: '存在外键引用,请删除相关借阅记录后再进行图书删除...',
                                type: 'warning'
                            })
                            break;
                        }
                        default:{
                            this.$message({
                                message: '服务器开小差了,请刷新页面后重试...',
                                type: 'warning'
                            })
                        }
                    }
                })
            },
            // 切换每页显示的数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 切换页面
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
.heading-book{
    margin: 10px;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.book-img{
    height: 100px;
}
</style>